<template>
  <div class="bg">
    <img src="../assets/bgx.png" style="float: left;padding-left: 50px;padding-top: 30px">
    <div style=" width: 600px; margin: 200px auto; padding: 20px 50px;" class="back">
      <!-- 标题文字 -->
<!--      <h1 style="text-align: center; margin: 30px auto;">用户登录</h1>-->
      <el-card style="width: 75%;height: 330px;margin: 0 auto">
      <span style="padding-left: 30px;padding-bottom: 20px;font-size: 25px;float: left;">账号密码登录</span>
      <!-- 登录表单 -->
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm" style="font-weight: bold;width: 350px;margin: 0 auto">
        <el-form-item prop="username">
          <el-input v-model="ruleForm.username" style="width: 350px;" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="ruleForm.password" show-password placeholder="输入密码" style="width: 350px"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
                     style="background-color: #16d3d0;width: 350px;border: none" >登录
          </el-button>
        </el-form-item>
        <el-form-item style="font-size: 14px;color: white">
<!--          <span style="float: left"><a href="" style="color: white;text-decoration: none">忘记密码?</a></span>-->
          <span style="float: right;color:#000;">没有账号?现在就 <a href="/reg" style="color: #16d3d0;text-decoration: none">注册</a></span>
        </el-form-item>
      </el-form>
      </el-card>

    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 表单
      ruleForm: {
        username: '',
        password: '',
        confirmPassword:''
      },
      // 表单规则
      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 4, max: 15, message: '长度在 4 到 15 个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 4, max: 15, message: '长度在 4 到 15 个字符', trigger: 'blur'}
        ],
        confirmPassword: [
          {required: true, message: '请输入确认密码', trigger: 'blur'},
          {
            validator: (rule, value, callback) => {
              if (value !== this.form.password) {
                callback(new Error('两次输入密码不一致'));
              } else {
                callback();
              }
            },
            trigger: 'blur'
          }
        ]
      }
    };
  },
  methods: {
    // 提交表单
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let url = 'http://localhost:9200/user/login';
          console.log('url = ' + url);

          let formData = this.qs.stringify(this.ruleForm);

          console.log("formData=" + formData)
          this.axios.post(url, formData).then((response) => {
            let jsonResult = response.data;
            console.log(jsonResult,'jsonResult');
            if (jsonResult.state == 20000) {
              this.$message({
                message: '登录成功',
                type: 'success'
              });
              let jwt = jsonResult.data;
              localStorage.setItem("localUserJwt", jwt);
              //跳转
              this.$router.go(-1);
            } else {
              this.$alert(jsonResult.message, '错误', {
                confirmButtonText: '确定',
                callback: action => {
                }
              });
            }
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>
<style>
.bg{
  background: url("../assets/bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  height: 1500px;
}
.back {
  background-color: rgba(255, 255, 255, 0);
}
.el-input{
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  margin: 0;
  height: 44px;
  /*padding: 10px 20px;*/
}
</style>